Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會展開使用 Avalonia UI 技術所建立的 TopAOAIConnector App 。由於使用 Avalonia UI 可以很快速的進行各平台的 桌面 應用程式開發，並且透過此 TopAOAIConnector App 來串接 Azure OpenAI Service 時所需的功能研究。

本篇是 就是要來點 A.I. 的 TopAOAIConnector App 系列文的 EP26。

在 EP 25 檢視過整體的功能後，會發現有些幾個在使用上的困擾：

1. 若直接上傳附加文字檔，沒有輸入任何提問時，其實不用呼叫 AOAI 服務。
2. 若對談的訊息越來越多時，雖然先前已有設計 ScrollViewer ，但沒有讓 ScrollViewer 自動捲動到底部，造成使用上有點麻煩。

在本回來處理一下上述這兩點問題吧！

關於第一點的問題調整上單純，只要在 attach 方法最後多檢查一下 InputText ，再決定是否呼叫 AOAI 服務。

找到 ViewModels/ChatPageViewModel.cs 的 ChatPageViewModel 類別當中的 Attach 方法，並找到原本：

var textContent = InputText == string.Empty ? fileContent : $"{InputText}{Environment.NewLine}{fileContent}";

BuildChatText(textContent);

messages.Add(textContent);

await BuildAoaiResultToChatText();

改寫成如下：

var isInputTextEmpty = string.IsNullOrEmpty(InputText);

var textContent = isInputTextEmpty ? fileContent : $"{InputText}{Environment.NewLine}{fileContent}";

messages.Add(textContent);

BuildChatText(textContent);            

if (!isInputTextEmpty)
    await BuildAoaiResultToChatText();

調整完成如下圖紅框：

要調整第二點的話，由於 ScrollViewer 是否捲動是要根據 ChatText 文字的增加而執行，所以就可以透過先前安裝的 Avalonia.Xaml.Behaviors 來調整。

不過就先繼續在此 ChatPageViewModel 類別中增加 Scroll 方法：

[RelayCommand]
private static void Scroll(ContentControl contentControl)
{
    System.Diagnostics.Debug.WriteLine("Scroll...");

    if (contentControl is ScrollViewer scrollViewer)
    {
        scrollViewer.ScrollToEnd();
    }
}

調整完成如下圖紅框：

再找到 Views/ChatPageView.axmal 來調整 ScrollViewr，將原本撰寫的 XAML 標記：

<ScrollViewer>
    <TextBlock Margin="0,4" FontSize="20" Text="{Binding ChatText}" TextWrapping="WrapWithOverflow" />
</ScrollViewer>

替換成如下：

<ScrollViewer Name="mainScorllViewer">
    <Interaction.Behaviors>
        <ValueChangedTriggerBehavior Binding="{Binding ChatText}">
            <InvokeCommandAction Command="{Binding ScrollCommand}" CommandParameter="{Binding #mainScorllViewer}" />
        </ValueChangedTriggerBehavior>
    </Interaction.Behaviors>
    <TextBlock Margin="0,4" FontSize="20" Text="{Binding ChatText}" TextWrapping="WrapWithOverflow" />
</ScrollViewer>

調整變更差異如下圖紅框：

偵錯執行(F5)試試看：

首先，先把新聞內容附檔附上。

再輸入提問 "請將上述新聞內容總結至 40 字內。" 後，點選 "送出"。

此時才會看到 AOAI 的 "回應"。

再輸入提問 "新聞內容提及的電費每度電為多少元。" 後，點選 "送出"。

目前對談的內容不夠多，所以還未看到 ScrollViewer 的 Scroll 效果。

再輸入提問 "新聞內容當中所提到的人物名稱為那些？" 後，點選 "送出"。

看到 AOAI 的 "回應" 後，其實有看到 ScrollViewer 的 Scroll 的效果，但不明顯。

再輸入提問 "這些人物的職稱各是什麼？" 後，點選 "送出"。

看到 AOAI 的 "回應" 後，這次的 ScrollViewer 的 Scroll 的效果就很明顯了。

此時，可以稍微去捲動一下 ScrollViewer 的 ScrollBar 看起來運作也都正常。

完成！！！